import React, { useState } from "react";
import { SettingO, ShoppingCartO } from "@react-vant/icons";
import { useNavigate } from "react-router";
import wo from "./images/wo.jpg";
import hui from "./images/hui.jpg";
import He from "../../components/He/index";
import { ShareSheet, Cell } from "react-vant";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [visible, setVisible] = useState(false);
  const options = [
    [
      { name: "微信", icon: "wechat" },
      { name: "朋友圈", icon: "wechat-moments" },
      { name: "QQ", icon: "qq" },
    ],
  ];
  const hanGong = () => {
    navigate("/She");
  };
  const username = JSON.parse(localStorage.getItem("username") as string) || "";
  const hanLogin = () => {
    navigate("/login");
  };

  return (
    <div style={{ width: "100vw", height: "100vh", background: "#f6f7f9" }}>
      <div style={{ width: "100vw", height: "23vh", background: "#e9f3ff" }}>
        {/* 图标 */}
        <div
          style={{
            height: 60,
          }}
          onClick={() => hanGong()}
        >
          <SettingO
            style={{
              position: "absolute",
              top: "5vw",
              right: "5vw",
              zIndex: 999,
              fontSize: "5vw",
            }}
          />
        </div>
        {/* 登录 */}
        {username ? (
          <div style={{ display: "flex" }}>
            <img
              src={username.avator}
              alt=""
              style={{
                width: "18vw",
                height: "10vh",
                borderRadius: "50%",
                marginLeft: "5vw",
              }}
            />
            <p
              style={{
                fontSize: "6vw",
                marginLeft: "4vw",
                marginTop: "3vh",
              }}
            >
              {username.nickname}
            </p>
          </div>
        ) : (
          <div style={{ display: "flex" }}>
            <img
              src={wo}
              alt=""
              style={{
                width: "18vw",
                height: "10vh",
                borderRadius: "50%",
                marginLeft: "5vw",
              }}
            />
            <button
              style={{
                fontSize: "6vw",
                marginLeft: "4vw",
                marginTop: "1vh",
                background: "#e9f3ff",
                border: "none",
              }}
              onClick={() => hanLogin()}
            >
              立即登录
            </button>
          </div>
        )}
      </div>
      {/* 会员 */}
      <div
        style={{
          width: "89vw",
          height: "7vh",
          padding: "2vh 3vw",
          display: "flex",
          borderRadius: "3vw",
          backgroundColor: "#3c3c3c",
          marginBottom: "2vh",
          marginLeft: "3vw",
        }}
        onClick={() => navigate("/hui")}
      >
        <img
          src={hui}
          alt=""
          style={{
            width: "9vw",
            height: "5vh",
            marginLeft: "3vw",
            marginTop: "1vh",
            marginRight: "1vh",
          }}
        />
        <p style={{ color: "#ded89a", fontSize: "5vw", marginTop: "1.5vh" }}>
          会员
        </p>
        <button
          style={{
            width: "25vw",
            height: "5vh",
            borderRadius: "5vw",
            marginTop: "1vh",
            marginLeft: "38vw",
            backgroundColor: "#f1b97c",
          }}
        >
          权益中心
        </button>
      </div>
      {/* 组件 */}
      <div style={{ height: "31vh", marginRight: "3vw" }}>
        <He></He>
      </div>
      {/* 列表 */}
      <div style={{ height: "680px" }}>
        <Cell
          title="商城订单"
          isLink
          value={<ShoppingCartO style={{ fontSize: "20px" }} />}
          style={{ fontSize: "18px", borderBottom: "1px solid #f6f6f6" }}
          onClick={() => navigate("/dingdan")}
        />
        <Cell
          title="挂号订单"
          isLink
          style={{  fontSize: "18px", borderBottom: "1px solid #f6f6f6" }}
          onClick={() => navigate("/gua")}
        />
        <Cell
          title="收货地址"
          isLink
          style={{ fontSize: "18px", borderBottom: "1px solid #f6f6f6" }}
          onClick={() => navigate("/shouhuo")}
        />
        <Cell
          title="我的卡券"
          isLink
          style={{ fontSize: "18px", borderBottom: "1px solid #f6f6f6" }}
          onClick={() => navigate("/kaquan")}
        />
        <Cell
          title="门诊预约"
          isLink
          style={{ fontSize: "18px", borderBottom: "1px solid #f6f6f6" }}
          onClick={() => navigate("/menzhen")}
        />
        <Cell
          title="商品收藏"
          isLink
          style={{ fontSize: "18px", borderBottom: "1px solid #f6f6f6" }}
          onClick={() => navigate("/shou")}
        />
        <Cell
          title="价格公示"
          isLink
          style={{ fontSize: "18px", borderBottom: "1px solid #f6f6f6" }}
          onClick={() => navigate("/jiage")}
        />
        <Cell
          title="意见反馈"
          isLink
          style={{ fontSize: "18px", borderBottom: "1px solid #f6f6f6" }}
          onClick={() => navigate("/yijian")}
        />
        <Cell
          title="服务协议"
          isLink
          style={{ ffontSize: "18px", borderBottom: "1px solid #f6f6f6" }}
          onClick={() => navigate("/fuwu")}
        />
        <Cell
          title="隐私政策及简明版"
          isLink
          style={{ fontSize: "18px", borderBottom: "1px solid #f6f6f6" }}
          onClick={() => navigate("/yin")}
        />
        <Cell
          title="关于我们"
          isLink
          style={{ fontSize: "18px", borderBottom: "1px solid #f6f6f6" }}
          onClick={() => navigate("/guan")}
        />
        <Cell
          title="分享应用"
          isLink
          style={{ fontSize: "18px", borderBottom: "1px solid #f6f6f6" }}
          onClick={() => setVisible(true)}
        />
        <ShareSheet
          visible={visible}
          options={options}
          title="-- 分享到 --"
          onCancel={() => setVisible(false)}
          onSelect={(option, index) => {
            console.log("option", option);
            console.log("index", index);
            setVisible(false);
          }}
        />
        <p style={{ textAlign: "center", fontSize: "16px", marginTop: "3vh" }}>
          客服热线：<span style={{ color: "#1d71f5" }}>400-078-1000</span>
        </p>
      </div>
    </div>
  );
};

export default Index;
